<template>
	<div class="content">
		<back-img :isIndex='true'></back-img>
		<div v-if="type=='info'">
			<!-- 已支付 -->
			<div class="payd" v-if='info.pay_status==1'>
				<div class="payd-info flex1">
					<div class="payd-info-info">
						<img src="@/assets/img/index/dui.png" alt="">已支付
					</div>
					<div>{{form.money||'0元'}}</div>
				</div>
				<div class="payd-list">
					<img :src="'https://guahao.tcyy.org.cn/api/image?barcode='+info.pid" alt="">
					<!-- <div>{{info.pid}}</div> -->
				</div>
			</div>
			<!-- 已支付 -->
			<!-- 已取消 -->
			<div class="cancel flex1" v-if='info.pay_status==2'>
				<div class="cancel-info">
					<img src="@/assets/img/index/cuo.png" alt="">已取消
				</div>
				<div>{{form.money||'0元'}}</div>
			</div>
			<!-- 已取消 -->
			<!-- "exe_status": "就诊状态|0-等待接诊,1-完成就诊,2-正在就诊,-1标记为不就诊", -->
			<!-- pay_status": "支付状态|0-待支付;1-已支付;2-已退费", -->
			<!-- 待支付 -->
			<div class="orderTime" v-if='info.pay_status==0'>
				<!-- <div class="orderTime-time flex3">
					<van-count-down time="3320032" format="mm 分 ss 秒" />后订单失效
				</div> -->
				<div class="orderTime-pay flex1">
					<div class="orderTime-pay-info">
						<div class="orderTime-pay-info-choose flex3">
						   <img src="@/assets/img/index/yes.png" alt="">
						</div>
						待支付
					</div>
					<div class="orderTime-pay-num">{{form.money||'0元'}}</div>
				</div>
			</div>
		</div>
		<div class="title">预约信息</div>
		<div class="info">
			<van-cell-group :border='false'>
			  <!-- <van-cell :border='false' title="预约医院" :value="form.name" /> -->
			  <van-cell :border='false' title="科室" :value="form.room" />
			  <van-cell :border='false' title="号别" :value="form.doctor"/>
			  <van-cell :border='false' title="医生" :value="form.doctorName"/>
			  <van-cell :border='false' title="就诊时间" :value="form.time"/>
			  <van-cell :border='false' title="挂号记账金额" :value="form.money"/>
			</van-cell-group>
		</div>
		<div class="title">就诊人</div>
		<div class="info">
			<van-cell-group :border='false'>
			  <van-field readonly is-link :border='false'  v-model="userInfo.pat_name" label="姓名" placeholder="请选择就诊人" @click="type=='jiuzhen'?showPicker=true:''" />
			  <van-cell :border='false' title="证件号码" :value="userInfo.idno" />
			  <van-cell :border='false' title="手机号" :value="userInfo.phno"/>
			  <van-cell :border='false' title="就诊卡" :value="userInfo.pid"/>
			</van-cell-group>
		</div>
		<!-- 支付 -->
		<div style="margin-top: 10px;">
			<div v-if='type=="info"&&info.pay_status==0'>
				<div class="payInfo"> 
					<div class="payInfo-i flex1" @click="payIndex=i" v-for="(v,i) in payList" :key='i'>
						<div class="payInfo-i-info">
							<img class="payInfo-i-img" :src="v.img" alt="">{{v.name}}
							<!-- <span style="padding-left: 10px;" class="newKttips" v-if='i==1'>即将开通，测试中，请用户勿使用。</span> -->
						</div>
						<!-- v-if='i==0' -->
						<div class="payInfo-i-choose flex3">
							<img v-if='payIndex==i' src="@/assets/img/index/yes.png" alt="">
						</div>
					</div> 
					<!-- <div class="newKttips">
						1.如选择医保支付,您需同意并授权平台将您的身份信息提供至微信及医保部门用于实名认证。
						<br>
						2.医保支付暂时不支持退费，请慎重选择。
					</div> -->
				</div>
				<div class="payBtn flex1">
					<div class="payBtn-i" @click="showCancel=true">取消预约</div>
					<div class="payBtn-i full" @click="getPay()">去支付</div>
				</div>
			</div>
		</div>
		<div class="show">
			<!-- 退号&&info.price==0 -->
			<div style="margin:33px 0;" @click="showAlter()" v-if='info.pay_status==1&&info.exe_status==0'>
				<div class="show-btn flex3">退号</div>
			</div>
			<!-- 退号 -->
			<div v-if='type=="jiuzhen"'>
				<div class="tips">
					<div class="tips-choose flex3">
						<img src="@/assets/img/index/yes.png" alt="">
					</div>
					我已阅读并同意 <span>《预约挂号须知》</span>
				</div>
				<div class="show-btn flex3" @click="submitEvent()">确定预约</div>
			</div>
			<div class="show-rule">
				<div class="show-rule-title">温馨提示：</div>
				<div class="show-rule-info">
					<span v-if='form.money=="0元"'>
						1.请使用就诊人信息进行实名预约挂号，持身份证、医保卡或电子码就诊。
						<br>2.若选择医保支付，请确认当前就诊人为本人，否则无法进行后续作。
						<br>3.挂号成功后无需到自助取号机取号，直接到诊区扫码报到等候叫号就诊。
						<br>4.如需退号，请在预约就诊时间截止之前退号，超过时间无法退号;如果是医保支付的挂号费，请到窗口退号;如果是微信支付的挂号费，可以在线上直接退号，退号成功后，退款会原路返回。
					</span>
					<span v-else>
						1.请使用就诊人信息进行实名预约挂号，持身份证、医保卡或电子码就诊。
						<br>2.若选择医保支付，请确认当前就诊人为本人，否则无法进行后续作。
						<br>3.挂号成功后无需到自助取号机取号，直接到诊区扫码报到等候叫号就诊。
						<br>4.如需退号，请在预约就诊时间截止之前退号，超过时间无法退号;如果是医保支付的挂号费，请到窗口退号;如果是微信支付的挂号费，可以在线上直接退号，退号成功后，退款会原路返回。		
					</span>
				</div>
			</div>
		</div>
		
		<van-popup v-model:show="showPicker" round position="bottom">
		  <van-picker
		    :show-toolbar='true'
			value-key='pat_name'
		    :columns="columns"
		    @cancel="showPicker = false"
		    @confirm="onConfirm"
		  />
		  <div class="addUser" @click="toPageLink('/addVisitor')">
			  <div class="addUser-btn flex3">新增就诊人</div>
		  </div>
		</van-popup>
		<!-- 取消本次预约 -->
		<van-popup v-model:show="showCancel" round position="center">
		    <div class="cancelAlter">
				<div class="cancelAlter-title">是否取消本次预约？</div>
				<div class="cancelAlter-btn flex3">
					<div class="cancelAlter-btn-i" @click="showCancel=false">取消</div>
					<div class="line"></div>
					<div class="cancelAlter-btn-i yes" @click="submitCancel()">确定</div>
				</div>
			</div>
		</van-popup>
		<!-- 取消本次预约 -->
		<!-- 取消本次退号 -->
		<van-popup v-model:show="showCancel1" round position="center">
		    <div class="cancelAlter">
				<div class="cancelAlter-title">是否确定退号？</div>
				<div class="cancelAlter-btn flex3">
					<div class="cancelAlter-btn-i" @click="showCancel1=false">取消</div>
					<div class="line"></div>
					<div class="cancelAlter-btn-i yes" @click="refundNum()">确定</div>
				</div>
			</div>
		</van-popup>
		<!-- 取消本次预约 -->
	</div>
</template>

<script>
	import { Toast } from 'vant'
	import {mapGetters,mapState} from 'vuex';
	export default {
		data() {
			return {
				showCancel1:false,
				showCancel:false,
				isOrder:false,//是否提交订单
				showPicker:false,
				columns:[],
				userInfo:{},//就诊人信息
				form:{},
				info:{},
				payList:[
					{name:'微信支付',img:require('@/assets/img/index/weixin.png'),type:'0'},
					{name:'医保支付',img:require('@/assets/img/index/yibao.png'),type:'2'}
				],
				payIndex:0,
				getform:{
					pid:"",
					rgst_date:'', 
					rgst_arr_no:'', 
					span:'',
					ser_num:''
				},
				type:'jiuzhen',//jiuzhen--挂号 --info--信息
				rgst_no:'',//挂号id
			};
		},
		computed: {
			...mapState({
				numInfo: 'numInfo'
			})
		},
		created() {
			if (this.$route.query.rgst_date) {
				console.log(this.numInfo)
				this.form=this.numInfo
				this.type=this.$route.query.type
				this.getform.pid = this.$route.query.pid
				this.getform.rgst_date = this.$route.query.rgst_date
				this.getform.rgst_arr_no = this.$route.query.rgst_arr_no
				this.getform.span = this.$route.query.span
				this.getform.ser_num = this.$route.query.ser_num
				this.petList()
			}
			if(this.$route.query.showtype){//详情
				this.type=this.$route.query.showtype
				this.rgst_no=this.$route.query.rgst_no
				this.userInfo.pid=this.$route.query.pid
				var infos={
					query_key:'6',
					query_content:this.rgst_no,
					pid:this.userInfo.pid,
					start_date:'',
					end_date:'',
					charge_type:''
				}
				this.getInfos(infos)
			}
		},
		components: {

		},
		methods: {
			showAlter(){
				this.showCancel1=true
				// if(this.info.price==0){
				// 	this.showCancel1=true
				// }else{
				// 	this.$toast('请到到窗口退号！')
				// }
			},
			toPageLink(url){
				this.$router.push({
					path:url,
					query:{},
				})
			},
			//获取支付链接
			getPay() {
				let that = this
				let url = "/api/his/pay_register";
				this.$axios.post(url,{
					rgst_no:that.info.rgst_no,
					pay_type:that.payIndex==1?2:1
				}).then(res => {
					if(res){
						console.log(res, '支付支付支付---')
						if(res.grantUrl){//医保支付
							var updatergstInfo={
								rgst_no:that.info.rgst_no,
								pid:that.userInfo.pid,
							}
						    that.$store.commit("updatergst_no",that.info.rgst_no)
							that.$store.commit("updatergstInfo",updatergstInfo)
							
						    var authUrl=res.grantUrl
							window.location.href = authUrl
							return
						}
						var info=res.payInfo
						info.appId='wx7cbe187d6eb21122'
						console.log(info, '支付信息---')
						that.$wechat.pay(info, function(res) {
							if(res.err_msg == 'get_brand_wcpay_request:ok') {
								that.$toast('订单支付成功！')
								setTimeout(function(){
									that.toPageLink('/myRegistration')
								},1500)
								// var infos={
								// 	query_key:'6',
								// 	query_content:that.rgst_no,
								// 	pid:that.userInfo.pid,
								// 	start_date:'',
								// 	end_date:'',
								// 	charge_type:''
								// }
								// that.getInfos(infos)
								
							}else{
								that.$toast('支付失败！')
							}
						})
					}
				}).catch(err => {});
			},
			//退号
			refundNum(){
				let that=this
				Toast.loading({
				   message: '提交中...',
				   forbidClick: true
				});
				that.showCancel1=false
				let url = "/api/his/refund_register";
				this.$axios.post(url,{
					rgst_no:that.info.rgst_no
				}).then(res => {
					if(res){
						Toast.clear();
						that.$toast('操作成功！')
						that.info.pay_status=2
					}
				}).catch(err => {});
			},
			getInfos(info){
				let that=this
				let url = "/api/his/get_registers";
				this.$axios.post(url,info).then(res => {
					that.info=res.rgst_list[0]
					that.form={
						name:'山西天慈医院',
						room:that.info.dept_name+'-'+that.info.doctor_name,
						doctor:that.info.staff_profession||that.info.resource_type||"",
						doctorName:that.info.doctor_name,
						time:that.info.visit_time||"-",
						money:that.info.price+'元',
					}
					that.userInfo={
						pat_name:that.info.pat_name,
						idno:that.info.idno,
						phno:that.info.pat_home_phno||'-',
						pid:that.info.pid
					}
				}).catch(err => {
					console.log("err", err);
				});
			},
			petList(){
				let that=this
				let url = "/api/pat/list";
				this.$axios.get(url).then(res => {
					that.columns = res.pat_info
					var user={}
					if(that.columns.length>0){
						that.columns.forEach((item, index) => {
							if(item.is_self){
								user=item
							}
						})
					}
					if(!user.id&&that.columns.length>0){
						user=that.columns[0]
					}
					that.userInfo=user
				}).catch(err => {console.log("err", err);});
			},
			submitEvent(){
				let that=this
				if(!this.userInfo.pid){
					return this.$toast('请选择就诊人！');
				}
				Toast.loading({
				   message: '提交中...',
				   forbidClick: true
				});
				this.getform.pid=this.userInfo.pid
				let url = "/api/his/register";
				this.$axios.post(url,this.getform).then(res => {
					that.type='info'
					var data=res.rgst_res
					var infos={
						query_key:'6',
						query_content:data.rgst_no,
						pid:that.userInfo.pid,
						start_date:'',
						end_date:'',
						charge_type:''
					}
					Toast.clear();
					that.getInfos(infos)
				})
				.catch(err => {});
			},
			onConfirm(e){
				this.showPicker=false
				if(e.pid){
					this.userInfo=e
				}
			},
			//取消预约
			submitCancel(){
				let that=this
				this.showCancel=false
				let url = "/api/his/cancel_register";
				this.$axios.post(url,{
					rgst_no:that.info.rgst_no
				}).then(res => {
					that.$toast('取消成功！')
					that.info.pay_status=2
				}).catch(err => {});
			},
			toPageLink(url){
				this.showPicker=false
				this.$router.push({
					path:url,
					query:{},
					replace: true
				})
			}
		}
	};
</script>

<style lang="less" scoped>
	.content{
		/deep/.van-popup--center.van-popup--round{
			border-radius: 5px;
		}
		/deep/.van-cell__value{
			display: flex;
			align-items: center;
			flex: auto;
			justify-content: flex-end;
		}
		.payd{
			background-color:#fff;
			padding-bottom: 17px;
			&-list{
				text-align: center;
				img{
					width:150px;
					display: block;
					margin:0 auto 11px;
				}
			}
			&-info{
				background-color: #fff;
				padding: 15px 18px;
				font-size: 15px;
				font-family: PingFang;
				font-weight: 500;
				color: #333333;
				&-info{
					display: flex;
					align-items: center;
				}
				img{
					width:20px;
					margin-right: 10px;
				}
			}
		}
		.cancel{
			background-color: #fff;
			padding: 15px 18px;
			font-size: 15px;
			font-family: PingFang;
			font-weight: 500;
			color: #333333;
			&-info{
				display: flex;
				align-items: center;
			}
			img{
				width:20px;
				margin-right: 10px;
			}
		}
		.cancelAlter{
			width: 300px;
			height: 125px;
			background: #FFFFFF;
			border-radius: 5px;
			&-btn{
				height: 45px;
				&-i{
					width:calc((100% - 1px) / 2);
					font-size: 15px;
					font-family: PingFang;
					font-weight: 500;
					color: #333333;
					text-align: center;
				}
				.line{
					width: 1px;
					height: 45px;
					background-color: #eee;
				}
				.yes{
					color: #1977FD;
				}
			}
			&-title{
				height: 80px;
				font-size: 15px;
				font-family: PingFang;
				font-weight: 500;
				color: #333333;
				text-align: center;
				line-height: 80px;
				border-bottom: 1px solid #eee;
			}
		}
		/deep/.van-field__control{
			text-align: right;
		}
		/deep/.van-cell__value{
			font-size: 13px;
			font-family: PingFang;
			font-weight: 500;
			color: #333333;
		}
		/deep/.van-cell{
			padding:3px 18px;
		}
		/deep/.van-cell__title{
			font-size: 13px;
			font-family: PingFang;
			font-weight: 500;
			color: #333333;
		}
		/deep/.van-count-down{
			font-size:12px;
			font-family: PingFang;
			font-weight: 500;
			color:#333333;
			line-height: inherit;
			color: #1977FD;
		}
		.payBtn{
			padding: 12px 36px 25px 36px;
			&-i{
				text-align: center;
				line-height: 34px;
				width: 124px;
				height: 34px;
				border: 1px solid #45C9CB;
				border-radius: 17px;
				font-size: 15px;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #44C8CD;
			}
			.full{
				color: #fff;
				width: 126px;
				height: 35px;
				background: linear-gradient(90deg, #5CD2A3 0%, #3EC6D9 100%);
				border-radius: 18px;
			}
		}
		.payInfo{
			background-color: #fff;
			&-i{
				padding:10px 18px;
				font-size: 14px;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #333333;
				&-info{
					display: flex;
					align-items: center;
				}
				&-img{
					width: 15px;
					margin-right:5px;
				}
				&-choose{
					width: 15px;
					height: 15px;
					background-color: #0ebea1;
					border-radius: 50%;
					img{
						width: 12px;
					}
				}
			}
			.newKttips{
				padding:0 20px 10px 40px;
				line-height: 20px;
				color: #999999;
			}
		}
		.orderTime{
			&-pay{
				padding:14px 18px;
				background:#fff;
				&-info{
					font-size: 15px;
					font-family: PingFang;
					font-weight: 500;
					color: #333333;
					&-choose{
						display: inline-flex;
						width: 15px;
						height: 15px;
						border-radius:50%;
						background-color:#D4181D;
						margin-right:9px;
						img{
							width: 12px;
						}
				    }
				}
				&-num{
					font-size: 15px;
					font-family: MiSans;
					font-weight: 500;
					color: #D4181D;
				}
			}
			&-time{
				height: 44px;
				font-size:12px;
				font-family: PingFang;
				font-weight: 500;
				color:#333333;
			}
		}
		.addUser{
			padding: 18px 0;
			&-btn{
				width: 219px;
				height: 28px;
				background: linear-gradient(90deg, #5CD2A3 0%, #3EC6D9 100%);
				border-radius: 14px;
				font-size: 15px;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #FFFFFF;
			    margin:auto;
			}
		}
		.show{
			padding: 0 18px;
			&-rule{
				font-size: 11px;
				font-family: PingFang;
				font-weight: 500;
				color: #999;
				padding-bottom:30px;
				&-info{
					line-height: 18px;
				}
				&-title{
					color: #e60618;
					margin-bottom:8px;
				}
			}
			&-btn{
				width: 340px;
				height: 44px;
				background: linear-gradient(90deg, #5CD2A3 0%, #3EC6D9 100%);
				border-radius: 22px;
				font-size: 15px;
				font-family: PingFang;
				font-weight: 500;
				color: #FFFFFF;
				margin-bottom: 12px;
			}
			.tips{
				padding: 13px 0 18px 0;
				font-size: 11px;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #666666;
				span{
					color: #1977FD;
				}
				&-choose{
					display: inline-flex;
					width: 15px;
					height: 15px;
					background: #1977FD;
					border-radius: 50%;
					margin-right: 6px;
					img{
						width:11px;
					}
				}
			}
		}
		.info{
		   padding: 5px 0;
		   background-color: #fff;
		}
		.title{
			height: 33px;
			line-height: 33px;
			padding-left: 18px;
			font-size: 12px;
			font-family: PingFang;
			font-weight: 500;
			color: #999999;
		}
		min-height: 100vh;
		background-color:#f0f8f8;
		
	}
</style>